<!--
 * @Description:
 * @Author: dh
 * @Date: 2022-01-24 15:14:34
 * @LastEditors: dh
 * @LastEditTime: 2025-09-04 14:55:40
-->
<header>标题</header>
<footer>尾部</footer>
<article>文章</article>
<nav>导航</nav>
<aside>定义页面内容之外的内容</aside>
<section>定义文档中的节</section>
<details>定义用户可查看或隐藏的额外细节2</details>
<dialog>定义对话框或窗口</dialog>
<figure>
	<figcaption></figcaption>
</figure>
<main>定义文档的主内容</main>
<mark>定义重要或强调的内容</mark>
<time>定义日期</time>

<!--
    <figure> 元素标记文档中的一个图像。<figure> 元素带有一个标题：
    <figcaption> 标签为 <figure> 元素定义标题。
-->
<figure>
	<img src="../assets/img/fire.png" alt="The Pulpit Rock" width="304" height="228" />
	<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>

<!--
    <fieldset> 标签可以将表单内的相关元素分组。
    <legend> 标签为 <fieldset> 元素定义标题。
-->
<fieldset>
	<legend>测试</legend>
	<input id="one" type="radio" name="items" value="one" />
	<label for="one">Choice One</label><br />
	<input id="two" type="radio" name="items" value="two" />
	<label for="two">Choice Two</label><br />
	<input id="three" type="radio" name="items" value="three" />
	<label for="three">Choice Three</label>
</fieldset>

<!--
    <time>
        datetime 规定日期/时间。另一种方式，则是由元素的内容给定日期/时间。
-->
<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>我在 <time datetime="2016-02-14">情人节</time> 有个约会。</p>

<form action="./index.html" method="get">
	<!-- 提交 -->
	<input type="submit" value="get" />
	<!-- placeholder --- input提示信息 -->
	<input type="text" placeholder="请输入用户名" />
	<!-- 文件选择 -->
	<input type="file" />
	<!-- date --- 日期选择 - 兼容不好 -->
	<input type="date" />
	<!-- time --- 时间选择 -->
	<input type="time" />
	<!-- datetime-local --- 既有时间又有日期 - 兼容性不好 -->
	<input type="datetime-local" />
	<!-- number --- 只能输入数字 - 兼容性不好 -->
	<input type="number" />
	<!-- email --- 电子邮箱(效验) - 兼容性不好 -->
	<input type="email" />
	<!-- url --- 输入网址(效验) -->
	<input type="url" />
	<!-- color --- 颜色选择器 - 兼容性不好 -->
	<input type="color" value="color" />
	<!-- range ---- 选值调节器(1 ~ 100) -->
	<input type="range" />
</form>

<script>
	// H5 - 获取地理位置 (HTTPS/file协议下才能用、HTTP协议不行)
	// 经度最大值180，纬度最大值90、
	window.navigator.geolocation.getCurrentPosition(
		function (position) {
			// 成功回调
			console.log(position); // Geoposition {coords: Coordinates, timestamp: 1561865377145}
		},
		function () {
			// 失败回调
			console.log('fail to get');
		}
	);

	// H5 - 重力感应(陀螺仪) (2019-6-30)
	// H5 - 重力感应(陀螺仪)
	// ios设备需要https协议、安卓设备没那么多限制、
	// alpha:指北(指南针) [0,360] 当为0的时候指北，180指南。
	// beta:平放的时候beta值为0。如果将手机立起来(短边接触桌面) 直立的时候beta为90度、
	// gamma:平放的时候gamma值为0。如果将手机立起来(长边接触桌面)，直立的时候gamma为90度、
	window.addEventListener('deviceorientation', function (event) {
		console.log(event);
	});

	// H5 - 设备加速度(判断晃动) (2019-6-30)
	window.addEventListener('devicemotion', function (event) {
		// event.acceleration.x | event.acceleration.y | event.acceleration.z
		if (Math.abs(event.acceleration.x) > 50 || Math.abs(event.acceleration.y) > 50 || Math.abs(event.acceleration.z) > 50) {
			alert('稳住，小老弟 ~');
		}
	});

	// H5 - Event
	// url被改变事件、
	addEventListener('popstate', e => {
		console.log(e);
	});
	// url中的锚点(hash)被改变事件、
	addEventListener('hashchange', e => {
		console.log(e);
	});
</script>